<template>
  <div class="body">
    <div v-show="morestatus == 1">
      <div class="document">
        <h4>快速操作</h4>
        <div class="Jump">
          <div @click="clockopen(1)"><i class="el-icon-collection"></i><span>打卡</span></div>
          <div @click="clockopen(2)"><i class="el-icon-date"></i><span>请假</span></div>
          <el-badge :value="quantity" class="item" @click.native="$router.push('/management')">
            <i class="el-icon-document"></i><span>待办</span>
          </el-badge>
          <div @click="$router.push('/chat-line-square')">
            <i class="el-icon-chat-line-square"></i><span>个人台账</span>
          </div>
          <div @click="$router.push('/register')"><i class="el-icon-menu"></i><span>事项登记</span></div>
        </div>
      </div>
      <div class="message">
        <div style="background-color: #19d37c">
          <h5>已受理</h5>
          <h2>{{ Acceptance }}</h2>
        </div>
        <div style="background-color: #4e42f7">
          <h5>已办结</h5>
          <h2>{{ handle }}</h2>
        </div>
        <div style="background-color: #f9c605">
          <h5>今日办理</h5>
          <h2>{{ returnNum }}</h2>
        </div>
      </div>
      <div class="work">
        <h4>工作手册</h4>
        <el-button type="primary" style="margin-left: 20px" @click="morestatus = 2">业务指导</el-button>
      </div>
      <div class="notice">
        <div class="title">
          <h4>通知公告</h4>
          <!-- <el-button type="primary" @click="morestatus = 3">更多</el-button> -->
          <div class="more" @click="morestatus = 3">更多</div>
        </div>
        <div class="showtitle" v-show="isShow == 1">
          <h3 style="margin-left: 10px">{{ titlemessage[0].title }}</h3>
          <div class="titlemessage">
            <span>{{ titlemessage[0].createTime }}&emsp;</span>
            <span>{{ titlemessage[0].author }}</span>
          </div>
        </div>
        <el-empty description="暂无通知公告" :image-size="100" v-show="isShow == 2"></el-empty>
      </div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <clockIn v-show="opennumber == 1"></clockIn>
        <leave :leavetype="leavetype" v-show="opennumber == 2" @changeMsg="changeMsg"></leave>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false" v-show="opennumber == 1">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <work v-show="morestatus == 2"></work>
      <more v-show="morestatus == 3"></more>
    </div>
  </div>
</template>

<script>
import clockIn from './clockIn/clockIn.vue'
import leave from './leave/leave.vue'
import api from '@/api/api'
import work from './work/index.vue'
import more from './more/index.vue'
import * as admin from '@/api/admin'
import { createLogger } from 'vuex'
import Seats from '@/api/Seats'
// import Seats from '@/api/Seats'
export default {
  data() {
    return {
      morestatus: 1,
      opennumber: '',
      dialogFormVisible: false,
      Acceptance: '',
      handle: '',
      returnNum: '',
      leavetype: [],
      current: 1,
      limit: 5,
      title: '',
      quantity: '',
      titlemessage: [{ title: '', author: '', createTime: '', picture: '' }],
      id: '',
      isShow: 1,
    }
  },
  mounted() {
    this.Refresh()
    let currentTimer = setInterval(function () {
      api.Statistics().then(e => {
        if (e.code == 200) {
          this.Acceptance = e.data.allAccepted
          this.handle = e.data.allCompleted
          this.returnNum = e.data.acceptedToday
        }
        Seats.quantity().then(e => {
          this.quantity = e.data
        })
      })
    }, 60000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(currentTimer)
      currentTimer = null
    })
  },
  methods: {
    Refresh() {
      api.Statistics().then(e => {
        if (e.code == 200) {
          this.Acceptance = e.data.allAccepted
          this.handle = e.data.allCompleted
          this.returnNum = e.data.acceptedToday
        }
      })
    },
    getquantity() {
      api.quantity().then(e => {
        this.quantity = e.data
      })
    },
    getnotice() {
      admin.getnotice(this.current, this.limit, this.title, 1).then(res => {
        if (res.data.total == 0) {
          this.isShow = 2
        } else {
          this.id = res.data.noticeList[0].id
          this.titlemessage = res.data.noticeList
        }
      })
    },
    gettype() {
      api.type().then(res => {
        if (res.code == 200) {
          this.leavetype = res.data
        }
      })
    },
    clockopen(eventdata) {
      switch (eventdata) {
        case 1:
          this.title = '打卡'
          break
        case 2:
          this.title = '请假'
          break
        default:
          break
      }
      this.dialogFormVisible = true
      this.opennumber = eventdata
    },
    // getdetails() {
    //   Seats.getNoticeMessage(this.id).then(e => {
    //     console.log(e)
    //   })
    // },
    changeMsg() {
      this.dialogFormVisible = false
    },
    Tip() {
      this.morestatus = 1
    },
  },
  created() {
    this.gettype()
    this.getnotice()
    this.getquantity()
  },

  components: {
    clockIn,
    leave,
    work,
    more,
  },
}
</script>

<style lang="scss" scoped>
@import './document.scss';
</style>
